import React,{Component} from 'react';
import 'antd/dist/antd.css';
import store from './store/index.js'
import {getTodoList,getInputChangeAction,getAddItemAction,getItemDeleteAction} from './store/actionCreater'
import TodoListUI from './TodoListUI'

class TodoList extends Component{
  constructor(props){
    super(props);
    this.state = store.getState();
    this.handleInuptChange = this.handleInuptChange.bind(this);
    this.handleStoreChange = this.handleStoreChange.bind(this);
    this.handleBtnClick = this.handleBtnClick.bind(this);
    this.handleItemDelete = this.handleItemDelete.bind(this);
    store.subscribe(this.handleStoreChange);
  }
  render(){
    return (
      <TodoListUI 
        inputValue={this.state.inputValue}
        handleInuptChange = {this.handleInuptChange}
        handleBtnClick = {this.handleBtnClick}
        dataSource ={this.state.list}
        handleItemDelete={this.handleItemDelete}
      />
    )
  }
  componentDidMount(){
    const action = getTodoList();
    store.dispatch(action);
  }
  handleInuptChange(e){
    const action = getInputChangeAction(e.target.value);
    store.dispatch(action);
  }
  handleStoreChange(){
    //更新state
    this.setState(store.getState());
  }
  handleBtnClick(){
    const action = getAddItemAction();
    store.dispatch(action)
  }
  handleItemDelete(index){
    const action = getItemDeleteAction(index);
    store.dispatch(action)
  }
}
export default TodoList;